import Taro from '@tarojs/taro'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Text, View } from '@tarojs/components'
import { dataFetch, validation, limit } from '@pier88health/p8h-common'
import i18n from '@I18N'
import { getPlatform } from '@UTILS/common'
import PhoneInput from '@COMPONENTS/CustomInput/PhoneInput'
import AuthCodeInput from '@COMPONENTS/CustomInput/AuthCodeInput'
import authActions from '@ACTIONS/auth'
import './LoginByPhone.scss'

const { debounce } = limit

@connect(
  state => ({
    ActionTokenId: state.auth.ActionTokenId,
  }), authActions
)
class LoginByPhone extends Component {
  constructor(props) {
    super(props)
    this.onSubmit = debounce(this.onSubmit, 500)
  }

  state = {
    showPhone: '',
    phone: '',
    code: '',
    canShowPhone: false,
  }

  onInputCode = e => {
    const { value } = e.detail
    const code = value.replace(/\s/g, '')
    this.setState({ code })
  }

  onInputPhone = e => {
    const { value } = e.detail
    this.setState({ phone: value })
  }

  onBlur = () => {
    const { phone } = this.state
    const value = dataFetch.formatPhoneNumber(phone)
    this.setState({ showPhone: value, canShowPhone: true })
  }

  onFocus = () => this.setState({ canShowPhone: false })

  getAuthCode = () => {
    const { phone } = this.state
    const payload = { PhoneNumber: phone }
    this.props.dispatchRequestAuthCode(payload)
  }

  onSubmit = async () => {
    const { code, phone } = this.state
    const canLogin = this.getSubmitStatus(phone, code)
    if (!canLogin) return
    const { ActionTokenId } = this.props
    try {
      const payload = {
        PhoneNumber: phone,
        ActionTokenId,
        AuthCode: code,
        AcquireChannel: Taro.getEnv(),
        double: true,
      }
      if (getPlatform().isWX) {
        const { code: JsCode } = await Taro.login()
        payload.JsCode = JsCode;
      }
      const data = { payload }
      this.props.dispatchLoginOrRegisterByPhone(data)
    } catch (e) {
      Taro.showToast({
        icon: 'none',
        title: '登录失败,请重试'
      })
    }
  }

  getSubmitStatus = (phone, code) => {
    const isValidPhoneNumber = validation.isPhoneNumber(phone)
    const isValidAuthCode = code.length === 4
    return isValidPhoneNumber && isValidAuthCode
  }

  onClearPhone = () => this.setState({ showPhone: '', phone: '' })

  render() {
    const {
      showPhone, code, phone, canShowPhone
    } = this.state
    const canLogin = this.getSubmitStatus(phone, code)
    return (
      <View>
        <PhoneInput
          phone={phone}
          showPhone={showPhone}
          onInput={this.onInputPhone}
          onClear={this.onClearPhone}
          show={canShowPhone}
          onBlur={this.onBlur}
          onFocus={this.onFocus}
          placeholder={i18n.login.placeholder_phone()}
        />
        <AuthCodeInput
          code={code}
          phone={phone}
          onInput={this.onInputCode}
          getAuthCode={this.getAuthCode}
          placeholder={i18n.login.placeholder_code()}
        />
        <View className="phone-login">
          <View className={`btn-submit${canLogin ? '' : ' disabled'}`} onClick={this.onSubmit}>
            <Text className={`login-text${canLogin ? '' : ' disabled'}`}>{i18n.login.login_button()}</Text>
          </View>
        </View>
        <View className="phone-tips">
          <Text className="tips">{i18n.login.phone_tips()}</Text>
        </View>
      </View>
    )
  }
}

export default LoginByPhone
